<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>系统用户</title>


		<link rel="stylesheet" href="../css/index.css">
		<script src="../js/vue.min.js"></script>
		<script src="../js/elementui.js"></script>
		<script src="../js/axios.min.js"></script>
		<script src="../js/mycommon.js"></script>
		<style type="text/css">
			/* .el-table__header{
				background-color: aqua;
			}
			.el-table__header-wrapper{
				background-color: aquamarine;
			} */
			.page {
				position: fixed;
				bottom: 0;
				height: 55%;
				width: 85%;
				text-align: center;
			}
		</style>

	</head>
	<body>


		<div id="app">

			<h2>系统用户管理</h2>


			<fieldset style="border: 1px solid gainsboro;margin-bottom: 4px;">

				<legend><i class="el-icon-search" style="color:#bfb6a3 ;">查询</i></legend>
				<el-form size="mini" :inline="true" :model="formInline" class="demo-form-inline">
					<el-form-item label="用户名">
						<el-input v-model="formInline.sysusername" placeholder="请输入用户名"></el-input>
					</el-form-item>

					<el-form-item>
						<el-button type="primary" @click="selectTj">查询</el-button>
					</el-form-item>
				</el-form>
			</fieldset>

			<!-- //增加菜单 -->
			<el-dialog title="增加菜单" :visible.sync="dialogVisible" width="50%">
				<el-form ref="form" :model="sizeForm" label-width="100px" size="mini">
					<el-form-item label="用户名">
						<el-input v-model="sizeForm.sysusername"></el-input>
					</el-form-item>
					<el-form-item label="密码">
						<el-input v-model="sizeForm.sysuserpwd"></el-input>
					</el-form-item>
				</el-form>

				<span slot="footer" class="dialog-footer">
					<el-button size="mini" @click="dialogVisible = false">取 消</el-button>
					<el-button size="mini" type="primary" @click="onSubmit">确 定</el-button>
				</span>
			</el-dialog>




			<el-table size="mini" :data="tableData" border style="width: 100%" id="table1">
				<el-table-column prop="sysusername" label="用户名" width="180">
				</el-table-column>

				<el-table-column prop="department" label="所属部门">
				</el-table-column>
				<el-table-column prop="rolename" label="所属角色" width="90">
				</el-table-column>
				<el-table-column prop="post" label="所属岗位">
				</el-table-column>
				<el-table-column prop="jobtype" label="所属工种">
				</el-table-column>



				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button type="primary" size="mini"
							@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
						<el-button size="mini" type="danger"
							@click="handleDelete(scope.$index, scope.row)">删除</el-button>

					</template>
				</el-table-column>

			</el-table>

			<!-- 分页 -->
			<div class="page">
				<el-pagination background layout="prev, pager, next" :total="tocal" :page-size="pagesize"
					@current-change="change">
				</el-pagination>
			</div>
			<!-- 分页 -->


			<!--编辑和修改-->
			<el-dialog title="修改用户名或密码" :visible.sync="dialogVisible1" width="50%">

				<el-form ref="form1" :model="sizeForm1" label-width="100px" size="mini">
					<el-form-item label="用户名" prop="sysusername">
						<el-input v-model="sizeForm1.sysusername"></el-input>
					</el-form-item>
					
					<el-form-item label="所属仓库">
						<el-cascader v-model="sizeForm1.warehouseidall" :options="optionswarehouse" filterable
							:props="{ 'value':'aid','label': 'warehouse' }"></el-cascader>
					</el-form-item>
					
					<el-form-item label="密码" prop="sysuserpwd">
						<el-input v-model="sizeForm1.sysuserpwd"></el-input>
					</el-form-item>


				</el-form>

				<span slot="footer" class="dialog-footer">
					<el-button size="mini" @click="dialogVisible1 = false">取 消</el-button>
					<el-button size="mini" type="primary" @click="dian">确 定</el-button>
				</span>
			</el-dialog>
			<!--修改角色结束-->
		</div>

		<script>
			var vm = new Vue({
				el: "#app",
				data: {
					formInline: {
						sysusername: ''
					},
					//增加菜单
					dialogVisible: false,
					dialogVisible1: false,
					sizeForm: {
						sysusername: '',
						userdep: '',
						userrole: '',
						userpos: '',
						userjop: ''
						
					},
					sizeForm1: {
						sysusername: '',
						sysuserpwd: '',
						userdep: '',
						userrole: '',
						userpos: '',
						userjop: '',
						warehouseidall: ''
					},
					tableData: [],
					tocal: 0, //分页总条数
					page: 1, //当前第几页
					pagesize: 5, //每页条数
					parentidoptions: [], //父级菜单下拉列表原始值
					optionswarehouse:[],
				},
				methods: {
					//改变页码
					change(val) {
						this.page = val
						this.initdata()
					},
					//添加
					onSubmit() {
						console.log('submit!');
						//执行业务提交
						this.dialogVisible = false
						var that = this
						//获取所属父菜单数据
						axios.post("http://localhost:8080/user/add", this.sizeForm).then(function(res) {
							if (res.data.code == 200) {
								that.$message('添加成功')
							}
						}).catch(err => {
							console.log(err)
						});
					},
					initdata() { //查询数据
						var that = this
						//ajax请求后端接口获取json数据
						axios.get(HTTP + "user/userselect/" + this.page, {
							page: that.page,
							pageSize: that.pagesize
						}).then(function(res) {
							/* alert(JSON.stringify(res.data.data.sysuserPageInfo.list)); */
							that.tableData = res.data.data.sysuserPageInfo.list
							that.tocal = res.data.data.sysuserPageInfo.total
						}).catch(err => {
							console.log(err)
						});
					},
					//查询修改角色
					handleEdit(index, row) {
						console.log(index, row.id);
						this.dialogFormVisible = true
						//加载仓库,仓库区,区货架信息
						this.initdata()
						var that = this
					
						axios.post("http://localhost:8080/user/upSelectAl", {
							"id": row.id
						}).then(function(res) {
							that.sizeForm1 = res.data.data.list[0]
							that.sizeForm1.warehouseidall = ('a' + res.data.data.list[0].userdep + ',b' + res
								.data.data.list[0].userpos + ',c' + res.data.data.list[0].userjop).split(",")
						}).catch(err => {
							console.log(err)
						});
					},
					dian() {
						//提交修改数据
						this.dialogVisible1 = false
						var that = this
						axios.post("http://localhost:8080/user/up", this.sizeForm1).then(function(res) {
							if (res.data.code == 200) {
								that.$message('修改成功')
								that.initdata()
							}
						}).catch(err => {
							console.log(err)
						});
					},
					//删除角色
					handleDelete(index, row) {
						//alert(row.id);
						var that = this
						this.$confirm('您确定删除吗?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => { // 确定操作
							axios.post("http://localhost:8080/user/del", {
								"id": row.id
							}).then(function(res) {
								if (res.data.code == 200) {
									that.$message('删除成功')
									that.initdata()
								}
							}).catch(err => {
								console.log(err)
							});


						}).catch(() => { // 取消操作

						});
					},

					selectTj() {
						//根据条件查询
						var that = this
						//alert(JSON.stringify(this.formInline))
						axios.post("http://localhost:8080/user/searchSelect", this.formInline).then(function(res) {
							//alert(JSON.stringify(res));
							that.tableData = res.data.data.list
							that.tocal = res.data.data.total
						}).catch(err => {
							console.log(err)
						});
					}
				},
				mounted() { //vue生命周期的方法
					//发送ajax请求到后端接口，获取json数据
					this.initdata()

				}
			})
		</script>

	</body>
</html>